<template>
	<slot></slot>
	<div class="fam_focus" id="fam__focus"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import { childNodes, changeKeyframesString, endsTimeAnimation, SetStaticCssTxtFunc, spliteMatrix } from '../../globalJS.js';

let prop = defineProps(['bodyBox', 'rangeClass']);

//选中 可控的element
let rangeElArr;
//上一个 选中的Element
let lastEl;
//当前 选中的Element
let currentEl;
//目标选中的 Style 标签
let targetStyleEl;
//目标keyframes 名称
let frameName;

let defaultStyle = `.avw {
			display: block !important;
			position: absolute;
	
			animation-name: avm;
	
			animation-duration: .5s;
			animation-timing-function: ease-in-out;
			animation-delay: 0s;
			animation-fill-mode: forwards;
		}
		@keyframes avm {
			from {
				transform: translate(100px);
			}
			to {
				transform: translate(0px);
			}
		}`;

onMounted(() => {
	//装载 style
	let setStaticStyle = SetStaticCssTxtFunc('focusMoveTo');
	setStaticStyle('test__sty', defaultStyle);

	// settleActiveElArr("fam2__body")
	// settleActiveElArr('fam2__body', 'fam_unit');
	rangeElArr = childNodes(prop['bodyBox'], prop['rangeClass']);
	console.log(rangeElArr);

	targetStyleEl = document.getElementById('test__sty');
	frameName = 'avm';

	for (var i = 0; i < rangeElArr.length; i++) {
		rangeElArr[i].addEventListener('click',uniClickHandler);
	}
	
	
	
});





function uniClickHandler(e) {
	lastEl = currentEl || e.target;
	currentEl = e.target;

	avan(lastEl, currentEl);
	// console.dir(lastEl, currentEl);
}

function avan(lastNode, currentNode) {
	if (lastNode == currentNode) {
		return true;
	}
	// console.dir(currentNode);

	let { lastPosition, currentPosition } = registerStyleAB(lastNode, currentNode);
	let joinedKeyframesString = joinKeyframes(lastPosition, currentPosition);

	//修改 style标签 的内容 和 html 代码
	changeKeyframesString(targetStyleEl.sheet, frameName, `@keyframes ${frameName} {${joinedKeyframesString}}`);
	resetFAMTAnimation(lastPosition, currentPosition);
	let testEl = document.getElementById('fam__focus');

	console.log(targetStyleEl);
	endsTimeAnimation(testEl, 'avw');
}

function registerStyleAB(a, b) {
	// let comA = window.getComputedStyle(a);
	// let comB = window.getComputedStyle(b);
	// console.log(comA, comB);

	function getbodyOffsetPosition(el, str) {
		let keys = 'offset' + str[0].toUpperCase() + str.substring(1);
		let translateDire = str == 'top' ? 'translateY' : 'translateX';
		// console.log(keys);
		let num = 0;
		let elclone = el;
		for (; elclone['offsetParent'] != null; ) {
			console.log(window.getComputedStyle(elclone));
			let matrixstr = window.getComputedStyle(elclone)['transform'];
			if (matrixstr != 'none') {
				let trans = spliteMatrix(matrixstr, translateDire);
				// console.log(trans);
				num += Number(trans);
			}
			// console.log(elclone, elclone['offsetParent']);
			num += Number(elclone[keys]);
			// console.log(num);
			elclone = elclone['offsetParent'];
		}
		return num;
	}

	// 当元素 不存在 在 页面上时 其位置 大小 均会在 起始点
	// console.dir(a);
	let lastPosition = {};
	let currentPosition = {};
	lastPosition['width'] = a.offsetWidth;
	lastPosition['height'] = a.offsetHeight;

	lastPosition['left'] = getbodyOffsetPosition(a, 'left');
	lastPosition['top'] = getbodyOffsetPosition(a, 'top');

	// let comedB = window.getComputedStyle(b);
	// console.dir(comedB);
	// console.log(comedB['transform']);
	currentPosition['width'] = b.offsetWidth;
	currentPosition['height'] = b.offsetHeight;

	currentPosition['left'] = getbodyOffsetPosition(b, 'left');
	currentPosition['top'] = getbodyOffsetPosition(b, 'top');

	return { lastPosition, currentPosition };
}

function joinKeyframes(lap, cup) {
	return `0%{
		width:${lap['width']}px;
		height:${lap['height']}px;
		left:${lap['left']}px;
		top:${lap['top']}px;
	}
	100%{
		width:${cup['width']}px;
		height:${cup['height']}px;
		left:${cup['left']}px;
		top:${cup['top']}px;
	}`;
}

function resetFAMTAnimation(lastP, currentP) {
	console.log(lastP, currentP);
}
</script>

<style scoped lang="scss">
.fam_focus {
	display: none;
	z-index: -1;
	background-color: rgba(123, 233, 244, 0.6);
	box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4;
}
</style>
